<template>
<div class="preInfo">
    <div class="avatar">
        <div><img :src="user.avatarUrl" alt=""><span class="nickname">{{user.nickname}}</span></div>
        <el-button type="primary" icon="el-icon-edit" size="mini">签到</el-button>
    </div>
    <div class="stateCount">
        <div>
            <div class="count">{{user.eventCount}}</div>
            动态
        </div>
        <div>
            <div class="count">{{user.follows}}</div>
            关注
        </div>
        <div>
            <div class="count">{{user.followeds}}</div>
            粉丝
        </div>
    </div>
    <div class="logout">
        <i class="el-icon-circle-close" @click="logout">退出登陆</i>
    </div>
</div>
</template>

<script>
import {
    _logout
} from '../../../network/user'
export default {
    name: 'preInfo',
    props: [

    ],
    data() {
        return {
            user: null,
        };
    },
    computed: {

    },
    created() {
        this.user = JSON.parse(sessionStorage.getItem('cloudUser'))
    },
    mounted() {

    },
    watch: {

    },
    methods: {
        logout() {
            _logout()
                .then(res => {
                    sessionStorage.removeItem("cloudUser")
                    window.location('/')
                    this.$message({
                        message: '退出成功',
                        type: 'success'
                    })
                })
        }
    },
    components: {

    },
};
</script>

<style lang="less" scoped>
@itemecolor: #192a56;
@textColor: #fff;
@headTextColor: #eec1c1;

.position_flex(@jc: space-between, @ai: center) {
    display: flex;
    align-items: @ai;
    justify-content: @jc;

}

.preInfo {
    &>div {
        .position_flex;
        margin-bottom: 20px;
    }

    .avatar {
        img {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            vertical-align: middle;
        }

        .nickname {
            margin-left: 5px;
        }
    }

    .stateCount {
        .position_flex(space-around);
        padding-bottom: 20px;
        border-bottom: 1px solid @headTextColor;

        .count {
            font-size: 18px;

            font-weight: bold;
        }
    }

    .logout {
        .position_flex(flex-end);
        color: @itemecolor;
        padding: 10px 5px;
        cursor: pointer;

        &:hover {
            color: #fff;
            background-color: #E03F40;
        }
    }
}
</style>
